<template>
  <div>
    <a-layout style="min-height: 100vh">
      <a-layout-sider
        v-if="navLayout === 'left'"
        :class="`ant-layout-sider-${navTheme}`"
        :theme="navTheme"
        :trigger="null"
        v-model:collapsed="collapsed"
        width="256px"
        collapsible
      >
        <div class="logo">Ant Design Vue Pro</div>
        <SiderMenu :theme="navTheme" />
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="toggleCollapsed"
          />
          <menu-fold-outlined v-else class="trigger" @click="toggleCollapsed" />
          <Header />
        </a-layout-header>
        <a-layout-content style="margin: 0 16px">
          <router-view></router-view>
          <div
            :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"
          >
            Bill is a cat.
          </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
          <Footer></Footer>
        </a-layout-footer>
      </a-layout>
    </a-layout>
    <SettingDrawer />
  </div>
</template>

<script>
import Header from "./Header.vue";
import Footer from "./Footer.vue";
import SiderMenu from "./SiderMenu.vue";
import SettingDrawer from "../components/SettingDrawer";
import { defineComponent, ref } from "vue";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  setup() {
    const collapsed = ref(false);

    const troggleCollapsed = () => {
      collapsed.value = !collapsed.value;
    };
    return {
      collapsed,
      troggleCollapsed,
    };
  },
  components: {
    Header,
    Footer,
    SiderMenu,
    SettingDrawer,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  },
  computed: {
    navTheme() {
      return this.$route.query.navTheme || "dark";
    },
    navLayout() {
      return this.$route.query.navLayout || "left";
    },
  },
});
</script>

<style scoped>
.trigger {
  padding: 0 20px;
  line-height: 64px;
  font-size: 20px;
}
.trigger :hover {
  background-color: #eeeeee;
}
</style>
